<template>
  <div class="search">
    <a-row class="row_search_2">
      <a-col :span="13">
        <div class="search_search_box">
          <a-col :span="20">
            <a-input placeholder="请输入内容" v-model="input_val"/>
          </a-col>
          <a-col :span="4"></a-col>
          <a-button icon="search" @click="getSearch_info"></a-button>
        </div>
      </a-col>
    </a-row>
    <a-col :span="19" class="cooo">
      <a-row class="row_search_3">
        <a-list
          item-layout="vertical"
          size="large"
          :pagination="pagination"
          :data-source="listData"
        >
          <a-list-item slot="renderItem" key="item.title" slot-scope="item">
            <strong>{{ item.description }}</strong> <br>
            <span>
              {{ item.content }}
            </span>
          </a-list-item>
        </a-list>
      </a-row>
    </a-col>
  </div>
</template>

<script>
import {getAction} from '../../api/manage'

const listData = [
  {
    description: '充电桩无法充电/充电后无法拔枪/APP扣费存在错误',
    content: '【只适用于北中心】1.X先生/女士，请您看下您的充电桩显示的代码是什么？2.X先生/女士，您别着急，我马上帮您反映，工作人员会尽快到现场处理。'
  },
  {
    description: '客户着急充电，咨询充电装位置',
    content: '【只适用于北中心】X先生/女士，X路X号附近有公用充电桩，您可前往此处进行充电，您也可以下载E充电APP，随时查找距离您最近的电动汽车充电桩。'
  },
  {
    description: '春节期间出现长时间故障停电',
    content: '【只适用于北中心】1.X先生/女士，您所反映的问题经过查询属于X问题，我们工作人员已经在现场处理了，春节期间停电非常抱歉，我们也非常理解您着急用电的心情，您放心，故障处理完毕后我们会第一时间为您送电。2.X先生/女士，您好，很抱歉，因为线路故障引发停电，给您的生活带来不便，非常抱歉。我们已经安排抢修人员前往故障地点，春节期间也会有工作人员进行抢修， 您放心，故障处理完毕后我们会第一时间为您送电。'
  },
]

export default {
  data() {
    return {
      input_val: '',
      listData,
      pagination: {
        pageSize: 6
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 搜索内容
    getSearch_info() {
      this.listData = [
        {
          description:'',
          content:''
        }, {
          description:'',
          content:''
        }, {
          description:'',
          content:''
        }
      ]
      getAction("/nlpcs/nlpcs_12398/answer", {
        qus: this.input_val
      })
        .then(res => {
          for (let i = 0; i < res.result.length; i++) {
            this.listData[i].description = res.result[i].stanQuestion
            this.listData[i].content = res.result[i].stanAnswer
          }
        })
    }
  }
}
</script>
<style>
.search {
  margin: 40px;
  min-height: calc(100vh - 59px);
}

.search_logo_box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.search_title_box {
  font-size: 20px;
  text-align: center;
  line-height: 100px;
}

.row_search_1 {
  margin-top: 40px;
}

.row_search_3 {
  margin-top: 15px;
}

.search_pAa_box {
  margin-top: 15px;
  border-bottom: 1px solid #dcdcdc;
}

.search_problem_box {
  font-size: 20px;
  margin-bottom: 5px;
}

.search_answer_box {
  padding-bottom: 3px;
}

.cooo {
  top: 30px;
}
</style>